<template>
    <div class="person">
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>

        <button @click="changeName()">改变名字</button>
    </div>
    <div>
        <h2>一辆{{  car.brand}}车，价值{{ car.price }}万</h2>
        <button @click="changePrice()">修改汽车的价格</button>
    </div>
    <div>
        全名：{{ fullName }}
    </div>
</template>

<!-- <script lang="ts">
export default{
    name:'Person', //组件名
    setup(){
        // 数据
        let name="张三" //注意，此时name不是响应式的
        let age=18 //注意，此时age不是响应式的

        // 方法
        function changeName(){
            console.log(1)
            name="HI"
        }
        return {name,age,changeName}
    }
}
</script> -->

<script setup lang="ts">
import type { RefSymbol } from '@vue/reactivity';
import { ref,toRefs } from 'vue'; // toRefs进行解构
import { computed } from 'vue';
import { reactive } from 'vue';

let firstName=ref("zhang")
let lastName=ref("san")

let fullName=computed(()=>{
    // console.log(1)
    return firstName.value.toUpperCase()+'-'+lastName.value;
});

// 使用这个函数来修改组件名
defineOptions({
  name: "Person234"
})
let a=666
let name=ref("Frit") //ref不仅支持基本数据类型，还支持对象
let age:number=18

// 数据
// let car={
//     brand:'奔驰',price:100
// }
// reactive常用于使对象变成响应式
let car=ref({
    brand:'奔驰',price:100
})

// 方法
function changePrice(){
    car.value.price+=10
    console.log(car)
    console.log(car.value.price)
}

function changeName(){
            console.log(1);
            name.value="HI";
        }
</script>

<style>
.person{
    background-color: #ddd;
    padding: 20px;
}
</style>